<!--
 * @Date: 2023-10-16 09:02:28
 * @Description:小标题组件
 * @LastEditors: hujingyang
 * @Author: hujingyang
 * @FilePath: \xunku_official_website\src\components\littleTitle\LittleTitleComponent.vue
 * @IDE: Created by VScode.
-->

<template>
  <div class="littleTitle-container">
    <div class="first-title" :style="`color:${titleColor}`">
      {{ primaryTitle }}
    </div>
    <div class="second-title">{{ secondTitle }}</div>
  </div>
</template>

<script lang="ts">
export default {
  props: {
    // 主标题文字
    primaryTitle: {
      type: String,
      default: "",
    },
    // 副标题文字
    secondTitle: {
      type: String,
      default: "",
    },
    /**标题颜色 */
    titleColor: {
      type: String,
      default: "#e95504",
    },
  },
  setup() {
    return {};
  },
};
</script>

<style scoped lang="scss">
.littleTitle-container {
  width: 100%;
  text-align: center;
  padding-bottom: 27px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;

  .first-title {
    font-size: 20px;
    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
    font-weight: bold;
    color: #e95504;
  }

  .second-title {
    font-size: 15px;
    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
    font-weight: bold;
    color: #c9c9c9;
    margin-top: 10px;
  }
}
</style>
